<template>
	<view>
		<uni-section title="订单列表" type="line">
			<view class="course-segmented">
				<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#FFD101" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-for="item in infoData" :key="item.id">
					<uni-card :title="'订单编号'+item.no" :extra="item.pay_status_text" :is-shadow="false">
						<view class="course">
							<view class="text-right">
								<image class="image" :src="item.course.cover" mode="aspectFill"></image>
							</view>
							<view class="course-brief">
								<view class="title pl8 line-clamp2">{{item.course.title}}</view>
								<uni-section :title="item.pay_amount" titleColor="red" titleFontSize="18px">
									<template v-slot:right>
										<text class="fz08rem number" v-if="item.integral > 0">积分：{{item.integral}}</text>
									</template>
								</uni-section>
							</view>
						</view>
						<view>下单时间：{{item.created_at}}</view>
						<view>支付时间：{{item.paid_at}}</view>
					</uni-card>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				form:{page:1,type:'course'},
				current: 0,
				items:['课程','资料','工艺节点'],
				infoData:[]
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/order','POST',this.form).then(res => {
					_this.infoData = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onClickItem(e){
				this.current = e.currentIndex
				if(e.currentIndex == 0){
					this.form.type = 'course'
				}
				if(e.currentIndex == 1){
					this.form.type = 'information'
				}
				if(e.currentIndex == 2){
					this.form.type = 'node'
				}
				this.onGetInfo()
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.course{display: grid;grid-template-columns: 40% 60%;margin-top: 12px;height: 100px;}
.course-brief{background-color: #FFFFFF;height: 120px;}
.title{height: 40px;font-size: 1.1rem;font-weight: 600;margin-top: 5px;}
.image{height: 90px;border-radius: 5px;}
</style>
